<template>
  <div>
    <Card class="search-condition">
      <Row>
        <span>单场比赛名称：</span>
        <Input v-model="pageModel.fieldName" placeholder="请输入" clearable style="width: 150px" />
        <span>赛事名称：</span>
        <Input v-model="pageModel.eventsName" placeholder="请输入" clearable style="width: 150px" />
        <span>比赛时间：</span>
        <DatePicker type="date" placeholder="请选择" style="width: 120px;margin-right:10px" v-model="pageModel.fieldstartTime"></DatePicker>
        <DatePicker type="date" placeholder="请选择" style="width: 120px;margin-right:10px" v-model="pageModel.fieldendTime"></DatePicker>
        <Button @click="fetchListStart" class="m-l-sm" type="primary" icon="md-search">筛选</Button>
        <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
        <Button @click="exportExcel" class="m-l-sm" icon="md-sync">导出</Button>
      </Row>
    </Card>
    <Card class="m-t-sm" v-if='initLoading'>
      <Row>
        <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
        <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage='changePage'></page-temp>
      </Row>
    </Card>
  </div>
</template>

<script>
  import dict from '_c/dict/dict.vue'
  import dictSpan from '_c/dict/dict-span.vue'
  import { getDict } from '@/api/configure'
  import Api from '@/api/game-statistical'
  // import Api from '@/api/game'
  import _ from 'lodash'
  const api = new Api()
  // 赛事管理
  export default {
    // props: ['kindCode'],
    components: {
      dict,
      dictSpan
    },
    data() {
      return {
        initLoading: false,
        loading: true,
        total: 0,
        AGOUTS: [],
        AGINS: [],
        units: [],
        eventsId: this.$route.params.id,
        pageModel: {},
        page: {
          // eventsId: this.$route.params.id,
          pageSize: this.$config.PAGE_SIZE,
          state: '0',
          pageNo: 1
        },
        tableColumns: [],
        tableColumnsTemp: [
          {
            title: '比赛场次',
            key: 'fieldNumber',
            align: 'left',
            width: 100,
            render: (h, params) => {
              let self = this
              return h(
                'span',
                self.$config.fieldNumberStr(params.row.fieldNumber)
              )
            }
          },
          {
            title: '赛事名称',
            key: 'eventsName',
            align: 'left',
            render: (h, params) => {
              let self = this
              let title = params.row.eventsName
              return h('span', { domProps: { title } }, title)
            }
          },

          {
            title: '单场比赛名称',
            key: 'fieldName',
            align: 'left',
            render: (h, params) => {
              let self = this
              let title = self.$config.userName(
                params.row.fieldName,
                params.row.fieldEnglishName
              )
              return h('span', { domProps: { title } }, title)
            }
          },
          {
            title: '比赛日期',
            key: 'fieldTime',
            align: 'left',
            render: (h, params) => {
              let self = this
              let title = self.$config.getDate(
                params.row.fieldTime,
                params.row.fieldEndTime
              )
              return h('span', { domProps: { title } }, title)
            }
          },
          {
            title: '比赛国家',
            key: 'fieldAddressCountry',
            align: 'left',
            render: (h, params) => {
              let self = this
              let title = self.$config.fieldAddress(
                params.row,
                self.AGOUTS,
                self.AGINS
              )
              return h('span', { domProps: { title } }, title)
            }
          },
          {
            title: '承办单位',
            key: 'operatingCompany',
            align: 'left',
            // ellipsis: true,
            render: (h, params) => {
              let self = this
              let row = self.units.find((x) => {
                x.teamId === params.row.operatingCompany
              }) || { teamName: params.row.operatingCompany }
              let title = row.teamName
              return h('span', { domProps: { title } }, title)
            }
          },
          {
            title: '比赛球场',
            key: 'fieldCourt',
            align: 'left',
            // ellipsis: true,
            render: (h, params) => {
              let self = this
              let title = params.row.fieldCourt
              return h('span', { domProps: { title } }, title)
            }
          },
          {
            title: '参加人数',
            key: 'userNum',
            align: 'left',
            render: (h, params) => {
              let self = this
              let title = params.row.userNum
              return h('span', { domProps: { title } }, title)
            }
          },
          {
            title: '阵容值',
            key: 'kindTeamAll',
            align: 'left',
            width: 90,
            render: (h, params) => {
              let self = this
              return h('span', self.$config.toStr(params.row.kindTeamAll))
            }
          },
          {
            title: '阵容加分',
            key: 'kindTeamScore',
            align: 'left',
            width: 100,
            render: (h, params) => {
              let self = this
              return h('span', self.$config.toStr(params.row.kindTeamScore))
            }
          },
          {
            title: '状态',
            key: 'state',
            align: 'left',
            render: (h, params) => {
              return h(dictSpan, {
                style: { color: params.row.state === '0' ? 'green' : '#CCCCCC' },
                props: { code: 'ZGX_BSFB', value: params.row.state }
              })
            }
          }
        ],
        tableData: []
      }
    },
    mounted() {
      let self = this
      this.init()
    },
    watch: {
      $route(to, from) {
        let self = this
        self.initLoading = false
        self.eventsId = to.params.id
        self.page.eventsId = to.params.id
        self.init()
      }
    },
    methods: {
      exportExcel() {
        let self = this
        let params = self.page
        params
        api.ExportFieldExcel(params).then((fileUrl) => {
          let link = document.createElement('a')
          link.href = fileUrl
          let suffix = fileUrl.substr(fileUrl.lastIndexOf('.'))
          link.download = '场次安排' + suffix
          link.click()
        })
      },
      init() {
        let self = this
        self.initLoading = true
        Promise.all([
          getDict({ code: 'AG_OUT' }),
          getDict({ code: 'AG_IN' }),
          getDict({ code: 'CBDW' })
        ])
          .then((data) => {
            self.AGOUTS = data[0]
            self.AGINS = data[1]
            self.units = data[2]
            self.reset()
          })
          .catch((err) => {
            self.reset()
          })
      },
      getVal(expression) {
        let self = this
        eval(expression)
      },
      // 获取数据
      fetchListStart() {
        let self = this
        // self.page = { ...self.page, ...self.pageModel, pageNo: 1 }
        self.page = { ...self.page, ...self.pageModel, pageNo: 1 }
        self.fetchList()
      },
      fetchList() {
        this.loading = true
        let promise = null
        promise = api.queryListEvents(this.page)
        promise
          .then((data) => {
            this.loading = false
            this.tableData = data.list || []
            this.total = data.count
          })
          .catch((error) => {
            this.loading = false
          })
      },
      // 分页
      changePage(pageNum) {
        this.page.pageNo = pageNum
        this.fetchList()
      },
      // 重置
      reset() {
        let self = this
        Object.keys(self.pageModel).forEach((x) => {
          self.pageModel[x] = null
        })
        if (self.eventsId) {
          self.tableColumns = self.tableColumnsTemp.filter(
            (x) => !['eventsName'].includes(x.key)
          )
        } else {
          self.tableColumns = self.tableColumnsTemp.filter(
            (x) => !['writeTime'].includes(x.key)
          )
        }
        this.fetchListStart()
      }
    }
  }
</script>

<style scoped>
.ivu-btn-primary {
  margin: 0 4px;
}
.ivu-card-bordered {
  border: 1px solid #fff;
}
.ivu-card:hover {
  box-shadow: none;
}
.demo-spin-col {
  border: none;
}
.ivu-input-number {
  width: 100%;
}
</style>
